<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>九宫格 有圆角</title>
    <style>
    div.body {
        width: 100px;
        height: 100px;
        background-color: blue;
        border: 1px;
        /*边框 */
        margin: 5px;
        /*外边距*/
        border-radius: 15px;
        padding: 5px;
        /*内变距*/
    }
    
    div.main {
        width: 500px;
        height: auto;
    }
    
    ul {
        list-style: outside none none;
    }
    
    li {
        float: left;
        list-style: outside none none;
    }
    </style>
</head>

<body>
    <div class="body">这是一个有圆角方格</div>
    <hr/>
    <p>下面是九宫格</p>
    <div class="main">
        <ul>
            <li>
                <ul>
                    <li>
                        <div class="body"></div>
                    </li>
                    <li>
                        <div class="body"></div>
                    </li>
                    <li>
                        <div class="body"></div>
                    </li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>
                        <div class="body"></div>
                    </li>
                    <li>
                        <div class="body"></div>
                    </li>
                    <li>
                        <div class="body"></div>
                    </li>
                </ul>
            </li>
            <li>
                <ul>
                    <li>
                        <div class="body"></div>
                    </li>
                    <li>
                        <div class="body"></div>
                    </li>
                    <li>
                        <div class="body"></div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>
